{% block sw_extension_store_landing_page %}
<div class="sw-extension-store-landing-page">
    <div class="sw-extension-store-landing-page__wrapper">
        <div
            v-if="isLoading"
            class="sw-extension-store-landing-page__wrapper-loading"
        >
            <sw-loader />

            <p>
                {{ $tc('sw-extension-store.landing-page.enablingShopwareStore') }}
                <br>
                {{ $tc('sw-extension-store.landing-page.takeMinutes') }}
            </p>
        </div>

        <div
            v-else-if="activationStatus !== null"
            class="sw-extension-store-landing-page__wrapper-activated"
        >
            <template v-if="activationStatus === 'error'">
                <sw-label
                    appearance="pill"
                    variant="danger"
                >
                    <mt-icon
                        name="regular-times-circle"
                        size="30px"
                    />
                </sw-label>

                <h2>
                    {{ error && error.title || $tc('sw-extension-store.landing-page.activationErrorTitle') }}
                </h2>
                <p>
                    {{ error && error.detail || $tc('sw-extension-store.landing-page.activationErrorDescription') }}
                </p>

                <mt-button
                    variant="primary"
                    @click="activateStore"
                >
                    {{ $tc('sw-extension-store.landing-page.retryButton') }}
                </mt-button>
            </template>

            <template v-else-if="activationStatus === 'success'">
                <sw-label
                    appearance="pill"
                    variant="success"
                >
                    <mt-icon
                        name="regular-check-circle"
                        size="30px"
                    />
                </sw-label>

                <h2>
                    {{ $tc('sw-extension-store.landing-page.activationSuccessTitle') }}
                </h2>
                <p>
                    {{ $tc('sw-extension-store.landing-page.activationSuccessDescription') }}
                </p>
            </template>
        </div>

        <div
            v-else
            class="sw-extension-store-landing-page__wrapper-content"
        >
            <img
                :src="assetFilter('/administration/administration/static/img/extension-store/store_illustration.svg')"
                alt=""
            >

            <span
                v-if="!insideModal"
                class="sw-extension-store-landing-page__wrapper-label"
            >
                {{ $tc('sw-extension-store.landing-page.label') }}
            </span>

            <h2>
                {{ $tc('sw-extension-store.landing-page.activationDescriptionTitleFirst') }}
                <br>
                {{ $tc('sw-extension-store.landing-page.activationDescriptionTitleSecond') }}
            </h2>

            <p>
                {{ $tc('sw-extension-store.landing-page.activationDescriptionTitleDescription') }}
            </p>

            <mt-button
                class="sw-extension-store-landing-page__activate_button"
                variant="primary"
                @click="activateStore"
            >
                {{ $tc('sw-extension-store.landing-page.activate') }}
            </mt-button>
        </div>
    </div>
</div>
{% endblock %}
